<template>
  <el-container style="height:100%;">
    <el-header>服务开发</el-header>
    <el-container>
      <el-aside>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>所有服务</span>
              <i class="el-icon-plus btn" @click="addLayer"></i>
            </div>
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              highlight-current
              ref="tree"
              @node-click="handelrNodeClick"
            >
              <span class="custom-tree-node" style="margin-top: 38px;" slot-scope="{ node, data }">
                <span v-if="data.id != showInput">{{ node.label }}</span>
                <!-- <el-form :rules="rules" :model="data">
                  <el-form-item prop="name"> -->
                    <el-input  v-if="data.id == showInput" v-model="data.name" @blur="saveName(data)"/>
                  <!-- </el-form-item>
                </el-form> -->
                <span>
                  <i class="el-icon-edit" @click.stop="() => edit(node, data)"></i>
                  <i class="el-icon-delete" @click.stop="() => del(node, data)"></i>
                </span>
              </span>
            </el-tree>
          </el-card>
        </el-main>
      </el-aside>
      <el-main>
        <v-domain v-if="id != null" :id="id"></v-domain>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import domainForm from "./view/Grid";
export default {
  data() {
    return {
      formName: "",
      id: null,
      domainPinfo: {},
      filterText: "",
      data: [],
      showInput:"",
      defaultProps: {
        children: "children",
        label: "name"
      },
      // rules:{
      //   name:[
      //     { required: true, validator: validatePass, trigger: 'blur' },
      //   ],
      // }
    }
  },
  components: {
    //自定义标签
    "v-domain": domainForm
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.loadTreeData();
  },
  methods: {
    reload() {
      this.formName = "";
      this.loadTreeData();
    },
    handelrNodeClick(data){
      this.id = data.id
    },
    addLayer() {
      this.data.push({name:"新建服务分组1",children:[],id:""});
    },
    add(node, data) {
      this.domainId = null;
      this.domainPinfo = {
        name: data.name,
        domainId: data.type == "layer" ? null : data.id,
        layerId: data.type == "layer" ? data.id : null
      };
      this.formName = "domain";
    },
    edit(node, data) {
      this.showInput = data.id;
    },
    saveName(data){
      let _this = this;
      debugger;
      if(data.name ==""){
        this.reload();
      }else{
        if(data.id == ""){
          this.axios
          .post(this.HOST+"/apicategory/create", {
            name: data.name
          })
          .then(function(res) {
            debugger;
            if (res.data.success) {

            }
            _this.reload();
          })
          .catch(function(err) {
            console.log(err);
          });
        }else{
          this.axios
          .post(this.HOST+"/apicategory/update", {
            id: data.id,
            name:data.name
          })
          .then(function(res) {
            if (res.data.success) {
              
            }
            _this.reload();
          })
          .catch(function(err) {
            console.log(err);
          });
        }
      }
      this.showInput = "";

    },
    del(node, data) {
      this.deleteTreeItem(data.id, data.type);
    },
    deleteTreeItem(id, type) {
      let _this = this;
      this.axios
        .post(this.HOST + "/" + type + "/delete", {
          id: id
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
          } else {
            _this.reload();
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    loadTreeData() {
      let _this = this;
      this.axios
        .post(this.HOST+"/apicategory/tree")
        .then(function(res) {
          _this.data = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
};
</script>
<style >
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
.el-tree-node__content{
  height: 48px !important;
}
</style>
